<script setup lang="ts">
import { ref } from "vue";
import { formatTimestamp } from "../utils/time";

// 定义组件Props
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});

// 默认表格列配置
const defaultColumns = [
  {
    field: "vInOutTime",
    title: "进出城市时间"
  },
  {
    field: "cityName",
    title: "城市名称"
  },
  {
    field: "cityCode",
    title: "城市编码"
  }
];

// 时间格式化方法
const formatTime = (timestamp: number) => {
  return formatTimestamp(timestamp);
};

const xCityListTable = ref();
const init = async () => {
  await xCityListTable.value?.reloadData(props.list);
};

defineExpose({ init });
</script>

<template>
  <!-- 表格容器 -->
  <div>
    <!-- vxe-table配置：带边框、溢出显示、高亮行、固定高度250px、自动调整列宽 -->
    <vxe-table
      ref="xCityListTable"
      border
      show-overflow="tooltip"
      :row-config="{ isCurrent: true, isHover: true }"
      height="250"
      :data="list"
      auto-resize
      empty-text="暂无数据"
    >
      <!-- 序号列 -->
      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
      <!-- 动态生成数据列 -->
      <vxe-table-column v-for="item in defaultColumns" :key="item.field" :field="item.field" :title="item.title">
        <template #default="{ row }">
          <span v-if="item.field === 'vInOutTime'">
            {{ row["vInOutType"] == 1 ? "进：" : "出：" }}{{ formatTime(row[item.field]) }}
          </span>
          <span v-else>
            {{ row[item.field] || row[item.field] == 0 ? row[item.field] : "-" }}
          </span>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<style lang="scss" scoped>
.el-table__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-table--border th,
.el-table--border td {
  border-right: 1px solid #ebeef5;
}
</style>
